<template>
	<view class="">
		<up-form :model="form" ref="uFormRef" :rules="rules" border labelPosition="left" labelWidth="auto">
			<template v-for="(item,index) in formFields" :key='index'>
				<up-form-item :prop="item.name" borderBottom>
					<template #label>
						<text>{{item.label}}</text>
						<text style="color: red" v-if="item.validation.required">*</text>
					</template>

					<template #right>
						<view v-if="item.type==='TEXT'">
							<up-input v-model="form[item.name]" border="none" input-align="right" fontSize="13px"
								:placeholder="item.placeholder" />
						</view>
						<view v-if="item.type==='SELECT'">
							<uni-data-select v-model="form[item.name]" placement='bottom' :placeholder="item.placeholder"
								:localdata="item.options.options" class="uniDataSelectStyle"></uni-data-select>
						</view>
						<view v-if="item.type==='CASCADER'">
							<uni-data-picker v-model="form[item.name]" :placeholder="item.placeholder"
								:localdata="item.options.options" class="uniDataPickerStyle"></uni-data-picker>
						</view>
						<view v-if="item.type==='TEXTAREA'">
							<up-textarea v-model="form[item.name]" border="none" input-align="right" fontSize="13px"
								:placeholder="item.placeholder" style="width: 200px;" count />
						</view>
						<view v-if="item.type==='DATE'">
							<uni-datetime-picker v-model="form[item.name]" :border="false" />
						</view>
					</template>
				</up-form-item>
				<template v-if="item.type==='NESTTEXT'">
					<template v-for="(itemN,indexN) in item.nestField" :key="indexN">
						<up-form-item v-for="(itemC,indexC) in itemN" :key="indexC" :prop="itemC.name" borderBottom>
							<template #label>
								<text>{{itemC.label}}</text>
								<text style="color: red" v-if="itemC.validation.required">*</text>
							</template>

							<template #right>
								<view v-if="itemC.type==='TEXT'">
									<up-input v-model="form[itemC.name]" border="none" input-align="right" fontSize="13px"
										:placeholder="itemC.placeholder" @blur="(value)=>{
											blurFun(itemN,index,indexC,indexN,value)
										}" />
								</view>
								<view v-if="itemC.type==='SELECT'">
									<uni-data-select v-model="form[itemC.name]" placement='bottom' :placeholder="itemC.placeholder"
										:localdata="itemC.options.options" class="uniDataSelectStyle"></uni-data-select>
								</view>
								<view v-if="itemC.type==='CASCADER'">
									<uni-data-picker v-model="form[itemC.name]" :placeholder="itemC.placeholder"
										:localdata="itemC.options.options" class="uniDataPickerStyle"></uni-data-picker>
								</view>
								<view v-if="itemC.type==='TEXTAREA'">
									<up-textarea v-model="form[itemC.name]" border="none" input-align="right" fontSize="13px"
										:placeholder="itemC.placeholder" style="width: 200px;" count />
								</view>
								<view v-if="itemC.type==='DATE'">
									<uni-datetime-picker v-model="form[itemC.name]" :border="false" />
								</view>
							</template>
						</up-form-item>
					</template>
				</template>

			</template>





		</up-form>
		<view>
			<up-button @click="submit" type="primary">提交</up-button>
		</view>
	</view>

</template>
<script setup>
	import { reactive, ref, computed, onMounted, toRaw, watch } from 'vue'
	const formFields = ref([])

	// 响应式表单数据
	const form = ref({ complainant_name: '' })
	// 校验规则
	/**
	 * @param {Object} itN 选中的数据 
	 * @param {Object} index 最外层下标 
	 * @param {Object} index1 最内层下表 
	 * @param {Object} index2 渲染 children 的下标
	 * 
	 * 
	 */

	const typeParams = type => {
		let flag = ''
		switch (type) {
			case 'FILE':
				flag = 'array'
				break
			case 'NUMBER':
				flag = 'number'
				break
			default:
				flag = 'string'
				break
		}
		return flag
	}
	const blurFun = (itN, index, index1, index2, value) => {
		// console.log(itN, index, index1, index2, value, 'itN,itC, numitN,itC, numitN,itC, numitN,itC, num')
		let mapItem = toRaw(formFields.value[index].nestField[0])
		let mapData = toRaw(formFields.value[index].nestField)
		let mapDataLast = mapData[mapData.length - 1]
		let mapDataLastNum = mapDataLast[0].order


		let mapForm = toRaw(form.value)
		let deepmapData = JSON.parse(JSON.stringify(mapData))


		function dealData(dealmapData, dealobj) {
			//判断字符串是否是纯数字
			function isPureNumber(str) {
				return /^-?\d+(\.\d+)?$/.test(str)
			}
			dealmapData.forEach((item, index) => {
				item.forEach((item1, index1) => {
					item1.value = dealobj[item1.name]
					item1.name = isPureNumber(item1.name.charAt(item1.name.length - 1)) ?
						item1.name.slice(0, item1.name.length - 1) :
						item1.name
				})
			})
			let arr = dealmapData.map(group => {
				let obj1 = {}
				group.forEach(item => {
					obj1[item.name] = item.value
				})
				return obj1
			})
			return arr
		}

		form.value[formFields.value[index].name] = dealData(deepmapData, mapForm)

		// 判断是否是最后一条数据的最后一个
		if (mapData.length - 1 === index2 && itN.length - 1 === index1) {
			formFields.value[index].nestField.push(mapItem.map((t, i) => {
				return {
					...t,
					order: mapDataLastNum + 1,
					name: t.name + (mapDataLastNum + 1),
					placeholder: t.placeholder + (mapDataLastNum + 1),
					validation: {
						...t.validation,
						required: false,
					}
				}
			}))
			let refMapDataAfter = formFields.value[index].nestField
			let mapItemAfter = toRaw(formFields.value[index].nestField[0])
			let mapDataAfter = toRaw(formFields.value[index].nestField)
			let mapDataLastAfter = mapDataAfter[mapDataAfter.length - 1]
			// let refMapData = formFields.value[index].nestField
			// 表单渲染 数组最后一项之前按照原始数据设置required
			let newMapDataAfter = refMapDataAfter.slice(0, refMapDataAfter.length - 1)


			let requiredValue = mapItemAfter.map(item => item.validation.required) // 获取 arr[0] 中每个项的 required 值
			newMapDataAfter.forEach((subArray, index) => {
				if (index !== 0) {
					subArray.forEach((item, subIndex) => {
						item.validation.required = requiredValue[subIndex] // 将 required 值赋值
					})
				}
			})
			console.log(newMapDataAfter, mapItemAfter, refMapDataAfter, '啊实打实广泛豆腐干梵蒂冈官方的说法大哥')
			//校验规则 数组最后一项之前按照原始数据设置required
			let newFilterData = []
			newMapDataAfter.forEach((t, i) => {
				newFilterData = newFilterData.concat(t)
			})
			console.log(newFilterData, '’newFilterDatanewFilterDatanewFilterData')
			newFilterData.forEach((t, i) => {
				if (t.validation.pattern) {
					rules.value[t.name] = [{
							required: t.validation.required,
							message: t.validation.message,
							trigger: ['blur', 'change'],
						},
						{
							pattern: t.validation.pattern,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value)
							},
							message: t.validation.message,
						},
					]
				} else {
					rules.value[t.name] = {
						type: typeParams(t.type),
						required: t.validation.required,
						message: t.validation.message,
						trigger: ['blur', 'change'],
					}
				}
			})
			// 数组的最后一项校验规则required为false
			// console.log(mapDataLastAfter, 'mapDataLastAftermapDataLastAftermapDataLastAfter')
			// return
			mapDataLastAfter.forEach((t, i) => {
				if (t.validation.pattern) {
					rules.value[t.name] = [{
							required: false,
							message: t.validation.message,
							trigger: ['blur', 'change'],
						},
						{
							pattern: t.validation.pattern,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value)
							},
							message: t.validation.message,
						},
					]
				} else {
					rules.value[t.name] = {
						type: typeParams(t.type),
						required: false,
						message: t.validation.message,
						trigger: ['blur', 'change'],
					}
				}
			})
		}
	}


	const rules = computed(() => {
		let obj = {}
		formFields.value.forEach((item, index) => {
			if (item.validation.pattern) {
				obj[item.name] = [{
						required: item.validation.required,
						message: item.validation.message,
						trigger: ['blur', 'change'],
					},
					{
						pattern: item.validation.pattern,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value)
						},
						message: item.validation.message,
					},
				]
			} else {
				//如果类型是NESTTEXT 循环嵌套 加上rules
				if (item.type === 'NESTTEXT') {
					let nestTextArr = toRaw(formFields.value).filter((item, index) => {
						return item.type === 'NESTTEXT'
					})
					let newArr = []
					nestTextArr.forEach((item, index) => {
						newArr = newArr.concat(item.nestField[0])
					})
					newArr.forEach((item1, index1) => {
						if (item1.validation.pattern) {
							obj[item1.name] = [{
									required: item1.validation.required,
									message: item1.validation.message,
									trigger: ['blur', 'change'],
								},
								{
									pattern: item1.validation.pattern,
									// 正则检验前先将值转为字符串
									transform(value) {
										return String(value)
									},
									message: item1.validation.message,
								},
							]
						} else {
							obj[item1.name] = {
								type: typeParams(item1.type),
								required: item1.validation.required,
								message: item1.validation.message,
								trigger: ['blur', 'change'],
							}
						}
					})
				} else {
					obj[item.name] = {
						type: typeParams(item.type),
						required: item.validation.required,
						message: item.validation.message,
						trigger: ['blur', 'change'],
					}
				}

			}

		})
		return obj

	})

	onMounted(() => {
		setTimeout(() => {
			formFields.value = [{
					'id': '2001',
					'name': 'complainant_name',
					'type': 'TEXT',
					'label': '投诉人姓名',
					'placeholder': '请输入您的姓名',
					'order': 1,
					'options': null,
					'validation': {
						'required': true,
						'min': 2,
						'max': 50,
						'pattern': null,
						'message': '请输入您的姓名',
						'custom': null,
						'maxSize': null
					},
					'attributes': { 'width': '100%' }
				},
				{
					'id': '2002',
					'name': 'contact_phone',
					'type': 'TEXT',
					'label': '联系电话',
					'placeholder': '请输入联系电话',
					'order': 2,
					'options': null,
					'validation': {
						'required': true,
						'min': null,
						'max': null,
						'pattern': /^(?:\+86|0086)?\s*(?:\d{3,4}[-])?\d{7,8}$|^1[3-9]\d{9}$/,
						'message': '请输入正确的电话格式',
						'custom': null,
						'maxSize': null
					},
					'attributes': { 'width': '100%' }
				},
				{
					'id': '2004',
					'name': 'law_theme',
					'type': 'CASCADER',
					'label': '普法主题',
					'placeholder': '请选择',
					'order': 4,
					'options': {
						'options': [{
								'text': '综合服务与保障类',
								'value': '1',
								'children': [{
										'text': '宪法、劳动法、合同法、知识产权法等基本法律知识',
										'value': '1-1',
										'children': [{
												'text': '区公安分局',
												'value': '10',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人民检察院',
												'value': '11',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人民法院',
												'value': '12',
												'children': null,
												'disabled': false
											},
											{
												'text': '区司法局',
												'value': '13',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									},
									{
										'text': '妇女权益保障',
										'value': '1-2',
										'children': [{
												'text': '区人民检察院',
												'value': '11',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人民法院',
												'value': '12',
												'children': null,
												'disabled': false
											},
											{
												'text': '区司法局',
												'value': '13',
												'children': null,
												'disabled': false
											},
											{
												'text': '区妇联',
												'value': '24',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									},
									{
										'text': '员工权益',
										'value': '1-3',
										'children': [{
												'text': '区人民检察院',
												'value': '11',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人民法院',
												'value': '12',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人力社保局',
												'value': '15',
												'children': null,
												'disabled': false
											},
											{
												'text': '区总工会',
												'value': '23',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									},
									{
										'text': '退役军人权益',
										'value': '1-4',
										'children': [{
											'text': '区退役军人事务局',
											'value': '25',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '气象灾害',
										'value': '1-5',
										'children': [{
											'text': '区气象局',
											'value': '26',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '地质灾害',
										'value': '1-6',
										'children': [{
											'text': '区地震局',
											'value': '27',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '残疾人权益',
										'value': '1-7',
										'children': [{
											'text': '区残联',
											'value': '28',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '医疗保障',
										'value': '1-8',
										'children': [{
											'text': '区医疗保障局',
											'value': '3',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '住房公积金',
										'value': '1-9',
										'children': [{
											'text': '区住房公积金管理中心',
											'value': '5',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '体育运动',
										'value': '1-10',
										'children': [{
											'text': '区体育局',
											'value': '7',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '卫生健康',
										'value': '1-11',
										'children': [{
											'text': '区卫生健康委',
											'value': '19',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									}
								],
								'disabled': false
							},
							{
								'text': '市场监管与保护类',
								'value': '2',
								'children': [{
										'text': '消防安全',
										'value': '2-1',
										'children': [{
											'text': '区消防救援支队',
											'value': '4',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '生产安全',
										'value': '2-2',
										'children': [{
											'text': '区应急管理局',
											'value': '20',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '建筑安全',
										'value': '2-3',
										'children': [{
											'text': '区住房城乡建设委',
											'value': '29',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '商标专利',
										'value': '2-4',
										'children': [{
											'text': '区市场监督管理局',
											'value': '21',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '交通安全',
										'value': '2-5',
										'children': [{
											'text': '区交通局',
											'value': '16',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '食品、药品、特种设备安全',
										'value': '2-6',
										'children': [{
												'text': '区农业农村局',
												'value': '18',
												'children': null,
												'disabled': false
											},
											{
												'text': '区市场监督管理局',
												'value': '21',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									},
									{
										'text': '文物保护',
										'value': '2-7',
										'children': [{
											'text': '区文化和旅游局',
											'value': '30',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '旅游业',
										'value': '2-8',
										'children': [{
											'text': '区文化和旅游局',
											'value': '30',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '水务',
										'value': '2-9',
										'children': [{
											'text': '区水务局',
											'value': '17',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '生态环境保护',
										'value': '2-10',
										'children': [{
												'text': '区发展和改革委员会',
												'value': '9',
												'children': null,
												'disabled': false
											},
											{
												'text': '区生态环境局',
												'value': '31',
												'children': null,
												'disabled': false
											},
											{
												'text': '市规划自然资源委门头沟分局',
												'value': '32',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									}
								],
								'disabled': false
							},
							{
								'text': '创新创业与产业升级类',
								'value': '3',
								'children': [{
										'text': '科技创新领域',
										'value': '3-1',
										'children': [{
											'text': '区经济和信息化局',
											'value': '1',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '知识产权',
										'value': '3-2',
										'children': [{
												'text': '区人民检察院',
												'value': '11',
												'children': null,
												'disabled': false
											},
											{
												'text': '区人民法院',
												'value': '12',
												'children': null,
												'disabled': false
											},
											{
												'text': '区司法局',
												'value': '13',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									}
								],
								'disabled': false
							},
							{
								'text': '政策咨询与扶持类',
								'value': '4',
								'children': [{
										'text': '人力资源社会保障',
										'value': '4-1',
										'children': [{
											'text': '区人力社保局',
											'value': '15',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '惠企政策',
										'value': '4-2',
										'children': [{
											'text': '区财政局',
											'value': '14',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '外商投资、营商环境',
										'value': '4-3',
										'children': [{
												'text': '中关村门头沟园管委会',
												'value': '6',
												'children': null,
												'disabled': false
											},
											{
												'text': '区促投中心',
												'value': '33',
												'children': null,
												'disabled': false
											}
										],
										'disabled': false
									},
									{
										'text': '税务',
										'value': '4-4',
										'children': [{
											'text': '区税务局',
											'value': '22',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '民营经济',
										'value': '4-5',
										'children': [{
											'text': '区工商联',
											'value': '8',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '政务服务',
										'value': '4-6',
										'children': [{
											'text': '区政务服务管理局',
											'value': '2',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '投资管理、价格管理、金融欺诈',
										'value': '4-7',
										'children': [{
											'text': '区发展和改革委员会',
											'value': '9',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									},
									{
										'text': '城市规划、自然资源、不动产确权',
										'value': '4-8',
										'children': [{
											'text': '市规划自然资源委门头沟分局',
											'value': '32',
											'children': null,
											'disabled': false
										}],
										'disabled': false
									}
								],
								'disabled': false
							}
						],
						'remote': null,
						'multiple': true,
						'filterable': true
					},
					'validation': {
						'required': true,
						'min': null,
						'max': null,
						'pattern': null,
						'message': '请选择',
						'custom': null,
						'maxSize': null
					},
					'attributes': {
						'rows': 4,
						'width': '100%'
					}
				}, {
					'id': '2003',
					'name': 'complaint_type',
					'type': 'SELECT',
					'label': '投诉类型',
					'placeholder': '请选择投诉类型',
					'order': 3,
					'options': {
						'options': [{
								'text': '产品质量',
								'value': 'QUALITY',
								'disabled': false
							},
							{
								'text': '服务态度',
								'value': 'SERVICE',
								'disabled': false
							},
							{
								'text': '售后问题',
								'value': 'AFTER_SALE',
								'disabled': false
							},
							{
								'text': '其他',
								'value': 'OTHER',
								'disabled': false
							}
						],
						'remote': null,
						'multiple': false,
						'filterable': false
					},
					'validation': {
						'required': true,
						'min': null,
						'max': null,
						'pattern': null,
						'message': '请选择投诉类型',
						'custom': null,
						'maxSize': null
					},
					'attributes': { 'width': '100%' }
				},
				{
					'id': '2004',
					'name': 'complaint_content',
					'type': 'TEXTAREA',
					'label': '投诉内容',
					'placeholder': '请详细描述您的投诉内容',
					'order': 4,
					'options': null,
					'validation': {
						'required': true,
						'min': 10,
						'max': 500,
						'pattern': null,
						'message': '请详细描述您的投诉内容',
						'custom': null,
						'maxSize': null
					},
					'attributes': {
						'rows': 4,
						'width': '100%'
					}
				},
				{
					'id': '2005',
					'name': 'time_content',
					'type': 'DATE',
					'label': '时间',
					'placeholder': '请选择时间',
					'order': 4,
					'options': null,
					'validation': {
						'required': true,
						'min': 10,
						'max': 500,
						'pattern': null,
						'message': '请选择时间',
						'custom': null,
						'maxSize': null
					},
					'attributes': {
						'rows': 4,
						'width': '100%'
					}
				},
				{
					'id': '2043',
					'name': 'respondent_info',
					'type': 'NESTTEXT',
					'label': '被申请人信息',
					'order': 4,
					'nestField': [
						[{
								'id': '2001',
								'name': 'respondent_name',
								'type': 'TEXT',
								'label': '被申请人姓名',
								'placeholder': '请输入您的姓名',
								'order': 0,
								'options': null,
								'validation': {
									'required': true,
									'min': 2,
									'max': 50,
									'pattern': null,
									'message': '请输入您的姓名',
									'custom': null,
									'maxSize': null
								},
								'attributes': { 'width': '100%' }
							},
							{
								'id': '2001',
								'name': 'respondent_number',
								'type': 'TEXT',
								'label': '被申请人电话',
								'placeholder': '请输入您的电话',
								'order': 0,
								'options': null,
								'validation': {
									'required': true,
									'min': 2,
									'max': 50,
									'pattern': null,
									'message': '请输入您的电话',
									'custom': null,
									'maxSize': null
								},
								'attributes': { 'width': '100%' }
							}
						],
					],
					'multiple': false,
					'filterable': false,
					'validation': { 'required': true }
				},
				{
					'id': '2043',
					'name': 'applicant_info',
					'type': 'NESTTEXT',
					'label': '申请人信息',
					'order': 4,
					'nestField': [
						[{
								'id': '2001',
								'name': 'applicant_name',
								'type': 'TEXT',
								'label': '申请人姓名',
								'placeholder': '请输入您的姓名',
								'order': 0,
								'options': null,
								'validation': {
									'required': true,
									'min': 2,
									'max': 50,
									'pattern': null,
									'message': '请输入您的姓名',
									'custom': null,
									'maxSize': null
								},
								'attributes': { 'width': '100%' }
							},
							{
								'id': '2001',
								'name': 'applicant_number',
								'type': 'TEXT',
								'label': '申请人电话',
								'placeholder': '请输入您的电话',
								'order': 0,
								'options': null,
								'validation': {
									'required': false,
									'min': 2,
									'max': 50,
									'pattern': null,
									'message': '请输入您的电话',
									'custom': null,
									'maxSize': null
								},
								'attributes': { 'width': '100%' }
							}
						],
					],
					'multiple': false,
					'filterable': false,
					'validation': { 'required': true }
				},
			]
			formFields.value.forEach((item, index) => {
				form.value[item.name] = ''
			})
		}, 500)
	})

	// const rules = {
	// 	complainant_name: {
	// 		required: true,
	// 		message: '请输入姓名',
	// 		trigger: ['blur', 'change'],
	// 	},
	// 	contact_phone: {
	// 		required: true,
	// 		message: '请选择时间',
	// 		trigger: ['blur', 'change'],
	// 	},
	// }

	// 表单引用
	const uFormRef = ref(null)

	// 提交方法
	function submit() {
		uFormRef.value
			.validate()
			.then(valid => {
				if (valid) {
					uni.$u.toast('校验通过')
					console.log(form.value, 'formformform')
				} else {
					uni.$u.toast('校验失败')
				}
			})
			.catch(() => {
				// 处理验证错误
				uni.$u.toast('校验失败')
			})
	}
</script>
<style scoped lang="scss">
	.submitBtn {
		position: fixed;
		bottom: 0;
		background-color: red;
		width: 95%;
		left: 50%;
		transform: translateX(-50%);
	}

	.uniDataSelectStyle {
		width: 220px;

		:deep(.uni-select) {
			border: none
		}


		:deep(.uni-select__input-text) {
			text-align: right;
		}
	}

	.uniDataPickerStyle {
		width: 200px;

		:deep(.input-value) {
			border: none;
		}

		:deep(.selected-list) {
			justify-content: flex-end;
		}

		:deep(.selected-area) {
			justify-content: flex-end;
		}


	}
</style>